<template>
<div class="menuPartMain" v-click-outside="clickMenuOutsideEvent">
  <div class="bg-[var(--menu-background-color)] text-[var(--menu-text-color)] px-[15px] py-[12px] rounded-xl shadow">
      <div class="menuItem" @click="editEvent">
        <div>
          <div>
            <svg viewBox="0 0 24 24" width="1em" height="1em">
              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                d="M3 21h18M12.222 5.828L15.05 3L20 7.95l-2.828 2.828m-4.95-4.95l-5.607 5.607a1 1 0 0 0-.293.707v4.536h4.536a1 1 0 0 0 .707-.293l5.607-5.607m-4.95-4.95l4.95 4.95">
              </path>
            </svg>
          </div>
          <div>编辑</div>
        </div>
      </div>

      <div class="menuItem" @click="deleteEvent">
        <div>
          <div>
            <svg viewBox="0 0 24 24" width="1em" height="1em">
              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                d="M9.172 14.828L12.001 12m2.828-2.828L12.001 12m0 0L9.172 9.172M12.001 12l2.828 2.828M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10">
              </path>
            </svg>
          </div>
          <div>删除</div>
        </div>
      </div>

      <div class="menuItem" @click="addNavigationEvent">
        <div>
          <div>
            <svg viewBox="0 0 24 24" width="1em" height="1em">
              <g fill="none" stroke="currentColor" stroke-width="1.5">
                <path d="M2 19V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2Z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" d="M2 7h20M9 14h3m3 0h-3m0 0v-3m0 3v3"></path>
              </g>
            </svg>
          </div>
          <div>添加导航</div>
        </div>
      </div>

      <div @click="settingEvent" class="menuItem border-t-[1px] border-[var(--background-color-dialog-area-box-under-line)]">
        <div>
          <div>
            <svg viewBox="0 0 24 24" width="1em" height="1em">
              <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
                <path d="M12 15a3 3 0 1 0 0-6a3 3 0 0 0 0 6"></path>
                <path
                  d="m19.622 10.395l-1.097-2.65L20 6l-2-2l-1.735 1.483l-2.707-1.113L12.935 2h-1.954l-.632 2.401l-2.645 1.115L6 4L4 6l1.453 1.789l-1.08 2.657L2 11v2l2.401.656L5.516 16.3L4 18l2 2l1.791-1.46l2.606 1.072L11 22h2l.604-2.387l2.651-1.098C16.697 18.832 18 20 18 20l2-2l-1.484-1.75l1.098-2.652l2.386-.62V11z">
                </path>
              </g>
            </svg>
          </div>
          <div>设置</div>
        </div>
      </div>
      <div @click="changeThemeEvent" class="menuItem">
        <div>
          <div>
            <svg viewBox="0 0 24 24" width="1em" height="1em">
              <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
                <path d="M12 14.5a6 6 0 1 0 0-12a6 6 0 0 0 0 12"></path>
                <path d="M16 21.5a6 6 0 1 0 0-12a6 6 0 0 0 0 12"></path>
                <path d="M8 21.5a6 6 0 1 0 0-12a6 6 0 0 0 0 12"></path>
              </g>
            </svg>
          </div>
          <div>切换主题</div>
        </div>
      </div>
    </div>
</div>
</template>

<script setup>
import { useLabelBarStore } from "@/stores/labelBar";
import { useThemeSwapStore } from "@/stores/themeSwap";
import { storeToRefs} from "pinia";
let { isShowMenu } = storeToRefs(useLabelBarStore());
const { changeTheme } = useThemeSwapStore()

import { ClickOutside as vClickOutside } from "element-plus";

//点击菜单之外
const clickMenuOutsideEvent = () => {
  isShowMenu.value = false;
  // console.log("点击菜单之外",isShowMenu.value)
};

const changeThemeEvent = () => {
    changeTheme()
}
</script>

<style scoped lang="scss">
.menuPartMain {
    // padding: 10px 15px;
    // background-color: var(--menu-background-color);
    border-radius: 0.75rem;

}
.menuItem>div {
  padding: 0 15px 0 10px;
  @apply flex h-[47px] justify-start items-center text-[18px];
  @apply cursor-pointer;
}

.menuItem>div {
  @apply rounded-lg my-[5px] mx-[5px];
}

.menuItem>div:hover {
  @apply bg-[var(--menu-background-color-hover)];
}

.menuItem>div>div>svg {
  @apply w-[24px] h-[24px] mr-[10px];
}
</style>